// 获取头像和昵称
const showUserInfo=function(){
   let user=localStorage.getItem('user')
   user=JSON.parse(user)

   let userInfoStr=`<img src="${user.headerimg}">
   <span>${user.nick}</span>
   `
   const userInfoEle = document.querySelector('.headimg')
    userInfoEle.innerHTML = userInfoStr
}
// showUserInfo()


let productList=[]
/**
 * 获取商品列表数据
 */
 function getProductList(pageNo=1) {
	axios({
		method: 'get',
		url: 'https://api.yuguoxy.com/api/shop/list',
        params:{
            pageNo,
            pageSize:8
        }
    }).then(res=>{
            // res =res.data
            let{resultCode,resultInfo}=res.data
            if(resultCode==1){
                productList=[...productList,...resultInfo.list]
            
            showProductList(productList)
        }
        })
	}
/**
 * 动态渲染商品列表
 */
function showProductList(productList) {
	let list = productList.map(item => {
		return`
        <div class="each" onclick="onDetail(${item.id})"> 
            <img src="${item.picture}">
            <p>${item.product}</p>
            <button index='${item.id}'>详情</button>
            <div class="mid">
                <span class="text">淘宝</span>
                <span class="bag">包邮</span>
            </div>

            <div class="bottom">
                <span>￥${item.price}</span>
                <span class="buy">${item.putaway}人已买</span>
                <span class="big">${item.categoryname}</span>
            </div>
        </div>`
	})
	const rootEle = document.querySelector('#content')
	rootEle.innerHTML = list.join('')
}

/**
 * 跳转详情页
 * @param {*} id
 */
 function onDetail(id) {
	// 跳转详情页
	location.href = './detail.html?id=' + id
}

/**
 * 注册跳转
 */

// 加载更多
function bindMore(){
    let moreBtn=document.querySelector('.more>button')
    let pageNo=1
    moreBtn.addEventListener('click',function(){
        getProductList(++pageNo)
    })
    
}

// 回到顶部
function backTop(){
    var divEleH=document.querySelector('#head')
    var divEleG=document.querySelector('.goTop')

    window.onscroll=function(){  //onscroll事件是当浏览器的滚动条滚动的时候触发
        let height=document.documentElement.scrollTop||document.body.scrollTop
        if(height>=300){
        divEleH.style.top='0px'
        divEleG.style.display='block'
        }else{
            divEleH.style.top='-80px'
            divEleG.style.display='none'
        }
    }
    //绑定点击事件
    divEleG.onclick=function(){
        window.scrollTo({
            top:0,
            behavior:'smooth'
        })
    }
}

getProductList(1)
backTop()
bindMore()

